<template>
	<div class="self-select" v-outside-click="close">
		<a class="dropdown_toggle" data-toggle="dropdown" @click="isShow=!isShow">{{label}}</a>
		<ul class="dropdown_menu" v-show="isShow">
			<li v-for="(item,index) in list" :key="index" :class="{active:currentVal == item[valKey]}" @click="onclick(item,index)">
				<slot :item="item" :index="index"></slot>
			</li>
		</ul>
	</div>
</template>
<script>
	export default {
		name: "self-select",
		props: {
			label: {
				type: String,
				default: "下拉"
			},
			list: {
				type: Array,
				default () {
					return []
				}
			},
			value: {
				type: String,
				default: ""
			},
			valKey: {
				type: String,
				default: "value"
			},
			labelKey: {
				type: String,
				default: "label"
			}

		},
		data() {
			return {
				isShow: false,
				currentVal: ""
			}
		},
		methods: {
			close() {
				this.isShow = false;
			},
			onclick(item, index) {
				if (this.currentVal !== item[this.valKey]) {
					//改变了;
					this.$emit("input", item[this.valKey]);
					this.currentVal = item[this.valKey];
					this.$emit("change", {
						item,
						index
					});
				}
				this.$emit("selected", {
					item,
					index
				});
				this.close();
			}
		},
		watch: {
			value(a) {
				this.currentVal = a;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.self-select {
		position: relative;

		.dropdown_toggle {
			padding: 0 15px;
			/* line-height: 20px; */
			padding-right: 45px !important;
		}

		.dropdown_toggle:hover {
			background: rgb(231, 231, 231) !important;
		}

		.dropdown_toggle::after {
			position: absolute;
			width: 24px;
			height: 24px;
			top: 14px;
			right: 18px;
			background: url(../assets/icons/icon-dropdown.png) 0 0 no-repeat;
			content: " ";
			opacity: 0.6;
		}

		.dropdown_menu {
			width: 160px;
			position: absolute;
			right: 0;
			top: 100%;
			z-index: 1000;
			padding: 5px 0;
			font-size: 14px;
			text-align: left;
			background: #fff;
			border: 1px solid rgba(0, 0, 0, 0.15);
			border-radius: 4px;
			/* display: none; */

			li {
				line-height: 32px;
				text-indent: 24px;
			}

			.divider {
				height: 1px;
				margin: 10px 0;
				background: #e5e5e5;
			}

			li:hover {
				background: rgb(231, 231, 231) !important;
			}
		}


	}

	.categories .dropdown_menu li:nth-child(1)::after {
		content: " ";
		display: block;
		width: 100%;
		height: 1px;
		padding-top: 10px;
		margin-bottom: 10px;
		background: #fff;
		border-bottom: 1px solid #e5e5e5;
	}
</style>
